<template>
  <div>
    <button-tab>
      <button-tab-item @on-item-click="search('1')">年</button-tab-item>
      <button-tab-item @on-item-click="search('2')">月</button-tab-item>
      <button-tab-item selected @on-item-click="search('3')">日</button-tab-item>
    </button-tab>
    <group>
      <datetime v-model="date" title="日期" :end-date="today"></datetime>
    </group>
    <card :header="{title: '总费用: ' + totalFee}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{electricFee}}</span>
          <br/>
          电费
        </div>
        <div class="vux-1px-r">
          <span>{{water}}</span>
          <br/>
          水费
        </div>
        <div class="vux-1px-r">
          <span>{{gas}}</span>
          <br/>
          燃气
        </div>
        <div>
          <span>{{other}}</span>
          <br/>
          其它
        </div>
      </div>
    </card>
    <div id="container2" style="width: 100%;height:280px;"></div>
  </div>
</template>

<script>
export default {
  name: 'EnergySummary',
  data () {
    return {
      date: '2020-02-04',
      today: '',
      electric: '',
      electricFee: '',
      water: '',
      gas: '',
      other: '',
      isLoaded: false,
      type: '3'
    }
  },
  methods: {
    init () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      month < 10 && (month = '0' + month)
      day < 10 && (day = '0' + day)
      this.today = this.date = `${year}-${month}-${day}`
    },
    search (type) {
      this.type = type
      var str = 't=' + type + '&d={date:' + this.date
      str = str.slice(0, type * 3 + 13) + '}'
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          // top: 'middle',
          data: ['电费', '水费', '燃气', '其它']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            // center: ['45%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true
                // position: 'center'
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              { value: 335, name: '电费' },
              { value: 310, name: '水费' },
              { value: 234, name: '燃气' },
              { value: 548, name: '其它' }
            ]
          }
        ]
      }
      this.ajax('/ystApp/AreaCollect', str).then(res => {
        var bean = res.areacolbean
        this.electric = bean.electric
        this.water = bean.water
        this.gas = bean.gas
        this.other = bean.other
        var electricFee = (bean.electric * 0.7973).toFixed(2)
        this.electricFee = electricFee
        option.series[0].data[0].value = electricFee
        option.series[0].data[1].value = bean.water
        option.series[0].data[2].value = bean.gas
        option.series[0].data[3].value = bean.other
        window.myChart.setOption(option)
      })
    }
  },
  created () {
    this.init()
  },
  mounted () {
    window.myChart = window.echarts.init(document.getElementById('container2'), 'light')
    this.search('3')
  },
  watch: {
    date (val) {
      if (!this.isLoaded) {
        this.isLoaded = true
        return
      }
      this.search(this.type)
    }
  },
  computed: {
    totalFee () {
      return Number(this.electricFee) + Number(this.water) + Number(this.gas) + Number(this.other)
    }
  }
}
</script>

<style scoped>

</style>
